<template>
	<!-- 20230309 -->
	<view class="text-no-data-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="padding-bottom-20 flex align-center flex-direction justify-around" :style="{'padding-top': top + 'rpx'}">
				<!-- 图片 -->
				<image class="jc-image" :style="{'width': imageWidth + 'rpx','height': imageHeight + 'rpx'}"
					:src="image" mode="aspectFill" @error="imageError"></image>
				<!-- 文案 -->
				<text class="margin-top-40 text-30 text-33">{{text}}</text>
				<!-- 按钮 -->
				<view class="margin-top-20 width-220 line-height-70 radius-35 bg-main text-center text-30 text-ff"
					@click="btnClick">
					{{btnText}}
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 暂无数据文案
			text: {
				type: String,
				default: ''
			},
			// 按钮显示文案
			btnText: {
				type: String,
				default: '去首页逛逛'
			},
			// 默认距离上方距离，单位rpx
			top: {
				type: Number,
				default: 60
			},
			// 暂无数据图片
			image: {
				type: String,
				default: '/static/mall/no_product.png'
			},
			// 图片宽度
			imageWidth: {
				type: Number,
				default: 160
			},
			// 图片高度
			imageHeight: {
				type: Number,
				default: 160
			}
		},
		methods: {
			/**
			 * 点击按钮
			 * @date 2023-03-09
			 */
			btnClick() {
				this.$emit('btnClick')
			},

			/**
			 * 图片加载失败
			 * @date 2023-03-09
			 */
			imageError(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			}
		}
	}
</script>

<style scoped>

</style>